<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="description" content="CSS世界demo实例演示页面之 block水平元素与清除浮动">
<meta name="keywords" content="">
<meta name="author" content="张鑫旭, zhangxinxu">
<title>block水平元素与清除浮动 » CSS世界demo演示</title>
<script>var _speedMark = new Date();</script>
<link rel="stylesheet" href="data/demo.css">
<style>
.constr {
    width: calc(100% - 40px);
    max-width: 360px;
    margin: 0 auto;
    text-align: left;
}
.constr:after {
    content: "";
    display: block;
    clear: both;
}
.constr > h6 {
    margin: 1em 0 .5em;
    font-weight: bold;
}
.box {
    padding: 10px;
    background-color: #cd0000;
}
.box > img {
    float: left;
}

.box:after {
    content: "";
    clear: both;
}

.clear-block:after {
    display: block;
}
.clear-table:after {
    display: table;
}
.clear-list-item:after {
    display: list-item;
}

.copymm {
    padding-top: 50px;
    color: #999;
    font-size: 12px;
    text-align: center;
}
</style><style id="video-roll-deg-scale" type="text/css">
                .video-roll-deg-scale {}
            </style><style id="video-roll-focus-style" type="text/css">#video-roll-root-mask {
                display: none;
                position: fixed;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                backdrop-filter: unset;
                z-index: 20000 !important;
                background-color: rgba(0, 0, 0, 0.9);
            }
            
            .video-roll-focus {
                width: undefinedpx;
                height: undefinedpx;
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                border-radius: unset
            }</style></head>

<body>
<div class="header"><style>.mmbb{position:absolute;right:0; width:495.00000000000006px; height:inherit;background:url(https://image.zhangxinxu.com/image/blog/202311/write-guid.jpg) no-repeat center; background-size:cover;}.mmbb img{display:none;box-shadow: -1px 1px rgba(0,0,0,.04);}.mmbb.active img{display:block;position: absolute;right: 0;top:100%;z-index:1;}@media screen and (max-width: 480px) {.mmbb{display:block;height:calc(6000vw / 414);width:100%;position:static;background-image:url(https://image.zhangxinxu.com/image/blog/202311/write-guid.jpg);}.header{height:auto;}.logo{display:block;position:static;}}</style>	<iframe id="taIframe" frameborder="0" style="display:none;"></iframe><a href="https://juejin.cn/book/7184663814950879270" target="_blank" class="mmbb" title="技术写作指南" onclick="taIframe.src='https://www.zhangxinxu.com/sp/ta.php?from=cssworld&amp;type=book&amp;r=' + Math.random();" rel="nofollow noopener"></a>
	<a href="https://demo.cssworld.cn/" class="logo" title="回到demo首页"></a>	
</div>
<div class="main">
	<h1>block水平元素与清除浮动实例页面</h1>
    <div class="show">
    	<h3>展示</h3>
    	<div class="go-bbs"><a href="https://bbs.cssworld.cn/" class="go-bbs">去论坛 »</a></div>
        <div class="demo">
    	        
            <div class="constr">
                <div id="box" class="box">
                    <img src="data/1.jpg" width="256" height="192">
                </div>
            </div>
            <div class="constr">
                <h6>请选择清除浮动的方法：</h6>
                <pre>.clear:after {
    content: '';
    display: <select id="select">
        <option value="" selected="selected">请选择</option>
        <option value="block">block</option>
        <option value="table">table</option>
        <option value="list-item">list-item</option>
    </select>;
    clear: both;
}</pre>
                
                <p class="copymm">此美女图片版权所有，注意不要复制与传播</p>
            </div>   
        </div>
        <h3>代码</h3>
        <ul class="codes col2">
            <li class="code_li">
                <div class="code_x">
                    <h5>HTML：</h5>
<pre name="code" class="DlHighlight html"><span class="paren xml-tagangle">&lt;</span><span class="keyword xml-tag xml-tag-open">div</span> <span class="builtin xml-attribute">class</span><span class="undefined"></span><span class="operator">=</span><span class="string"><span class="before">"</span>box clear<span class="after">"</span></span><span class="paren xml-tagangle">&gt;</span>
    <span class="paren xml-tagangle">&lt;</span><span class="keyword xml-tag xml-tag-open">img</span> <span class="builtin xml-attribute">src</span><span class="undefined"></span><span class="operator">=</span><span class="string"><span class="before">"</span>/images/common/l/1.jpg<span class="after">"</span></span><span class="paren xml-tagangle">&gt;</span>
<span class="paren xml-tagangle">&lt;/</span><span class="keyword xml-tag xml-tag-close">div</span><span class="paren xml-tagangle">&gt;</span></pre>
                </div>
            </li>
            <li class="code_li">
                <div class="code_x">
                    <h5>CSS：</h5>
<pre class="DlHighlight css"><span class="css-class"><span class="before">.</span>box</span> <span class="paren css-block-open">{</span>
    <span class="builtin css-declaration-kw">padding<span class="after">:</span></span> <span class="css-length">10<span class="after">px</span></span>;
    <span class="builtin css-declaration-kw">background-color<span class="after">:</span></span> <span class="css-color-spec"><span class="before">#</span>cd0000</span>;
<span class="paren css-block-close">}</span>
<span class="css-class"><span class="before">.</span>box</span> &gt; img <span class="paren css-block-open">{</span>
    <span class="builtin css-declaration-kw">float<span class="after">:</span></span> left;
<span class="paren css-block-close">}</span>

<span class="css-class"><span class="before">.</span>clear</span><span class="css-pseudo-class"><span class="before">:</span>after</span> <span class="paren css-block-open">{</span>
    <span class="builtin css-declaration-kw">content<span class="after">:</span></span> <span class="string"><span class="before">"</span><span class="after">"</span></span>;
    <span class="builtin css-declaration-kw">display<span class="after">:</span></span> <span class="string"><span class="before">'</span><span id="display"></span><span class="after">'</span></span>;
    <span class="builtin css-declaration-kw">clear<span class="after">:</span></span> both;
<span class="paren css-block-close">}</span></pre>
                </div>
            </li>
        </ul>
    </div>       
</div>

<script>
    var eleSel = document.getElementById('select'),
        eleBox = document.getElementById('box');

    var eleCode = document.getElementById('display');

    if (eleSel && eleBox) {
        eleSel.onchange = function() {
            if (this.value) {
                eleBox.className = 'box clear-' + this.value;  
            } else {
                eleBox.className = 'box';
            }  

            if (eleCode) {
                eleCode.innerHTML = this.value;
            }
        };
    }
   
</script>
        
<div class="footer">
    <div>Designed &amp; Powered by <a href="https://www.zhangxinxu.com/" target="_blank">zhangxinxu</a></div>
    <div><a href="https://demo.cssworld.cn/" class="index">Demo索引地图</a>   <a href="https://bbs.cssworld.cn/">访问论坛</a></div>  
</div>
<div class="ad_bottom"></div>
<script src="data/all.js"></script>
<script>
	DlHighlight.HELPERS.highlightByName("code", "pre");

	// 广告和推广
	var eleHeader = document.querySelector('.header');
	if (eleHeader && window.fetch) {
		// 广告处理
		fetch('https://www.zhangxinxu.com/php/_ajax-support.php').then(function (response) {
			return response.json();
		}).then(function (json) {
			if (json.code == 0) {
				var data = json.data;
				eleHeader.insertAdjacentHTML("afterbegin", '<style>.mmbb{position:absolute;right:0; width:'+ (data.width || 480) * 1.1 +'px; height:inherit;background:url('+ data.image +') no-repeat center; background-size:cover;}.mmbb img{display:none;box-shadow: -1px 1px rgba(0,0,0,.04);}.mmbb.active img{display:block;position: absolute;right: 0;top:100%;z-index:1;}@media screen and (max-width: 480px) {.mmbb{display:block;height:calc(6000vw / 414);width:100%;position:static;background-image:url('+ data.image +');}.header{height:auto;}.logo{display:block;position:static;}}</style>	<iframe id="taIframe" frameborder="0" style="display:none;"></iframe><a href="'+ data.url +'" target="_blank" class="mmbb" title="'+ data.title +'" onclick="taIframe.src=\'https://www.zhangxinxu.com/sp/ta.php?from=cssworld&type='+ data.key +'&r=\' + Math.random();" rel="nofollow noopener"></a>');
			}
		});
	}
</script>

 <div id="video-roll-root-mask"></div><div id="eagle-drag-images" style="position: fixed; top: -100000px;"></div></body></html>